<template>
    <div class="flex-align">
        <el-dropdown trigger="click">
            <span class="el-dropdown-selfdefine" style="font-size: 14px;cursor: pointer;">
                <i class="el-icon-more-outline" style="margin-bottom: 5px"></i>
                <span>更多</span>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item style="display: block">
                        <div @click="isEditWorkVisible()">编辑</div>
                    </el-dropdown-item>
                    <el-dropdown-item style="display: block">移动到章节</el-dropdown-item>
                    <el-dropdown-item style="display: block">保存到备课区</el-dropdown-item>
                    <el-dropdown-item style="display: block">
                        <div @click="deleteWorkByWorkId()">删除</div>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

        <el-dialog title="编辑作业" v-model="editWorkVisible" style="min-width: 400px;">
            <el-form :model="editWorkForm" ref="editWorkForm" :rules="baseRules" style="text-align: left">
                <el-form-item>
                    <el-upload action="" :http-request="onUpload">
                        <el-button size="small" type="primary">导入作业</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="作业类型" label-width="80px" prop="type">
                    <el-radio v-model="editWorkForm.type" :label="1">个人作业</el-radio>
                    <el-radio v-model="editWorkForm.type" :label="2">小组作业</el-radio>
                </el-form-item>
                <el-form-item label="作业标题" label-width="80px" prop="title">
                    <el-input v-model="editWorkForm.title" autocomplete="off" maxlength="70" show-word-limit
                        placeholder="作业标题"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="editWorkForm.content" type="textarea" placeholder="请输入作业描述"></el-input>
                </el-form-item>
                <el-form-item label="活动类型标签" label-width="100px">
                    <el-input v-model="editWorkForm.activity" autocomplete="off" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="应用环节" label-width="100px">
                    <el-select v-model="editWorkForm.process" placeholder="请选择">
                        <el-option v-for="item in process" :key="item.value" :label="item.label" :value="item.value"
                            style="display: block">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属章节" label-width="100px">
                    <el-select v-model="editWorkForm.chapter" placeholder="请选择">
                        <el-option v-for="item in chapter" :key="item.value" :label="item.label" :value="item.value"
                            style="display: block">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-switch v-model="editWorkMoreVisible" active-text="是否立即发布"
                        @click="editWorkMoreVisible = !editWorkMoreVisible">
                    </el-switch>
                </el-form-item>
                <el-form-item v-if="editWorkMoreVisible">
                    <el-form ref="editWorkMoreForm" :model="editWorkForm" :rules="moreRules" label-width="80px">
                        <el-form-item label="发布时间" label-width="80px" prop="releaseTime" style="margin-bottom: 24px">
                            <el-date-picker type="datetime" placeholder="选择日期时间" v-model="editWorkForm.releaseTime">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="截止时间" label-width="80px" prop="endTime" style="margin-bottom: 24px">
                            <el-date-picker type="datetime" placeholder="选择日期时间" v-model="editWorkForm.endTime">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="总分" prop="score">
                            <el-input v-model="editWorkForm.score" autocomplete="off"
                                style="width: 220px;margin-right:20px"></el-input>
                            <el-switch v-model="TimeoutVisible" active-text="若超时，禁止提交">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="resetEditWork('editWorkForm')">取 消</el-button>
                    <el-button type="primary" @click="submiteditWork('editWorkForm')">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getFormData } from "@/utils/getFormData.js";
import { deleteEmptyOption } from "@/utils/deleteEmptyOption.js";
import {getRequest, postRequest} from "@/utils/api";

export default {
    name: "editWork",
    components: {
    },
    data() {
        return {
            drawer: false,
            work: {},
            editWorkVisible: false,
            editWorkMoreVisible: false,
            TimeoutVisible: false,
            editWorkForm: {
                activity: "作业",
            },
            process: [
                {
                    label: '课前',
                    value: 0
                },
                {
                    label: '课中',
                    value: 1
                },
                {
                    label: '课后',
                    value: 2
                },
                {
                    label: '期中',
                    value: 3
                },
                {
                    label: '期末',
                    value: 4
                },
            ],
            chapter: [],
            baseRules: {
                type: [
                    { required: true, message: '请选择作业类型', trigger: 'blur' },
                ],
                title: [
                    { required: true, message: '请输入作业标题', trigger: 'blur' },
                ],
            },
            moreRules: {
                releaseTime: [
                    { required: true, message: '请选择发布时间', trigger: 'blur' },
                ],
                endTime: [
                    { required: true, message: '请选择截止时间', trigger: 'blur' },
                ],
                score: [
                    { required: true, message: '请输入作业总分', trigger: 'blur' }
                ]
            },
        }
    },
    methods: {
        // 通过作业id获取作业详情
        getWorkByWorkId() {
            const id = this.$store.getters.workId;
            getRequest(`/work/selectById/${id}`).then(res => {
                if (res) {
                    this.editWorkForm = deleteEmptyOption(res.data);
                }
            })
        },
        // 编辑作业弹窗可见性
        isEditWorkVisible() {
            this.getWorkByWorkId();
            this.editWorkVisible = true;
            if (this.editWorkForm.status == 2) this.editWorkMoreVisible = true;
        },
        // 确认编辑作业
        submiteditWork() {
            if (this.editWorkMoreVisible) {
                this.editWorkForm.status = 2;
                this.editWorkForm.releaseTime = this.$moment(this.editWorkForm.releaseTime).format("YYYY-MM-DD HH:mm:ss");
                this.editWorkForm.endTime = this.$moment(this.editWorkForm.endTime).format("YYYY-MM-DD HH:mm:ss");
                if (this.TimeoutVisible) {
                    this.editWorkForm.isAllowOvertimeSubmission = 2;
                } else {
                    this.editWorkForm.isAllowOvertimeSubmission = 1;
                }
            }
            else {
                this.editWorkForm.status = 1;
                this.$delete(this.editWorkForm, "releaseTime");
                this.$delete(this.editWorkForm, "endTime");
                this.$delete(this.editWorkForm, "isAllowOvertimeSubmission");
            }
            this.$delete(this.editWorkForm, "createTime");
            this.editWork();
        },
        // 取消编辑作业
        resetEditWork() {
            this.getWorkByWorkId();
            this.editWorkVisible = false;
            this.editWorkMoreVisible = false;
        },
        // 编辑作业提交
        editWork() {
            postRequest('/work/update', getFormData(this.editWorkForm)).then(res => {
                if (res) {
                    this.resetEditWork();
                    this.$emit('init');
                }
            })
        },
        // 删除作业
        deleteWorkByWorkId() {
            this.$confirm('', '您确定要删除吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                let id = this.$store.getters.workId;
                getRequest(`/work/delete/${id}`).then(res => {
                  console.log(res);
                    this.$emit('init');
                })

            }).catch(() => {
            });
        },
        // 上传文件
        onUpload(file) {
            this.editWorkForm.workFile = file.file;
        },
    },
}
</script>

<style scoped lang="less">
.flex-align {
    display: flex;
    align-items: center;
}
</style>
